<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <!--<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* css 代码  折线  */

        body {
            margin: 0;
            padding: 0;
            overflow: hidden; /* 防止页面出现滚动条 */
        }




    </style>
    <!--    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>-->
    <script src="https://cdn.hcharts.cn/highcharts/highcharts.js"></script>
    <!--<script src="https://cdn.highcharts.com.cn/highcharts/modules/exporting.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/series-label.js"></script>
    <script src="https://cdn.highcharts.com.cn/highcharts/modules/oldie.js"></script>
    <script src="https://code.highcharts.com.cn/highcharts-plugins/highcharts-zh_CN.js"></script>-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<!--
*************************************************************************
   Generated by JShare at 2023-12-05 20:03:45
   From: https://jshare.com.cn/demos/hhhhxu
*************************************************************************
 -->
<div id="container" style="min-width:350px;height:250px"></div>

<script>

        const urlParams = new URLSearchParams(window.location.search);
        const data = urlParams.get('data');
        const jsonData = JSON.parse(data);

        // 提取 "dataString" 和 "timeString"
        const phoneOut = jsonData.phoneOut;
        const phoneIn = jsonData.phoneIn;
        const time = jsonData.time;

        const title = jsonData.title;
        // 在控制台打印提取出的数据，以验证是否成功解析
        console.log("Data out: ", phoneOut);
        console.log("Time in : ", phoneIn);
        console.log("Time time: ", time);
        // 在控制台打印数据，以验证是否成功接收数据
        console.log(data);

	var chart = Highcharts.chart('container',{
    chart: {
        type: 'column'
    },
title: {
        text: '一周统计数'
    },

    xAxis: {
        categories: time,
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: '数量'
        }
    },
    tooltip: {
        // head + 每个 point + footer 拼接成完整的 table
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
		line: {
			dataLabels: {
				// 开启数据标签
				enabled: false
			},
			// 关闭鼠标跟踪，对应的提示框、点击事件会失效
			enableMouseTracking: true
		}
	},
	credits: {
	            	enabled: false // 禁用版权信息
	            },
colors: [
				 '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
    series: [{
        name: '拨出',
        data: phoneOut
    }, {
        name: '接听',

        data: phoneIn
    }]
});



</script>
</body>
</html>